<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas签名</title>
    <style type="text/css">
        html{
            background-color: black;
        }
        /* 设置画布样式 */
        #test{
            position:absolute;
            left:0;
            right:0;
            top:0;
            bottom:0;
            margin:auto;
            background-color: #fff;
        }
        .title{
            width:200px;
            margin:0 auto;
            color:orangered;
            text-align: center;
            padding:0.5rem 0;
            font-weight: 600;
            background:#fff;
        }
    </style>

    <script type="text/javascript">
        window.onload = function(){
            // 获取画布
            var test = document.getElementById("test");
            // 检验支持性
            if(test.getContext){
                // 获取画笔
                var ctx = test.getContext("2d");
            }
            // 为画布绑定鼠标按下事件
            test.onmousedown = function(event){
                // 设置事件兼容
                event = event || window.event;
                // 设置test画布对鼠标按下事件进行捕获
                if(test.setCapture){
                    // test.setCapture();
                }
                //获取鼠标偏移量
                var X = event.clientX - test.offsetLeft;
                var Y = event.clientY - test.offsetTop;
                // 清空路径容器
                ctx.beginPath();
                // 画笔抬起
                ctx.moveTo(X,Y);
                // 绑定鼠标移动事件
                document.onmousemove = function(event){
                    event = event || window.event;
                    // 获取鼠标移动偏移量
                    var proX = event.clientX - test.offsetLeft;
                    var proY = event.clientY - test.offsetTop;
                    // 压栈
                    ctx.save();
                    // 设置样式
                    ctx.strokeStyle = "skyblue";
                    // 划线
                    ctx.lineTo(proX,proY);
                    ctx.stroke();
                    ctx.restore();
                };
                // 为画布绑定鼠标抬起事件
                document.onmouseup = function(event){
                    event = event || window.event;
                    // 取消鼠标移动事件
                    document.onmousemove = null;
                    // 取消鼠标抬起事件
                    document.onmouseup = null;
                    // 取消对事件的捕获(兼容IE6)
                    // test.releasePointerCapture();
                };
                // 设置下载
                test.addEventListener('dblclick',() => {
                    let link = document.createElement('a');
                    link.href = test.toDataURL('image/png');
                    link.download = "sign.png";
                    link.click();
                },)
                return false;
            };
        };
    </script>

</head>
<body>
    <div class="title">双击签字板可下载签名</div>
    <canvas id="test" width="600" height="600">
        <span>您的浏览器不支持canvas属性</span>
    </canvas>
</body>
</html>